<template>
  <div
    class="job-list-container"
    v-loading="loading"
    element-loading-text="加载中..."
  >
    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <el-input
        v-model="searchQuery"
        placeholder="搜索职位..."
        prefix-icon="el-icon-search"
        class="search-input"
      />
      <el-select
        v-model="filterType"
        placeholder="任务类型"
        class="filter-select"
      >
        <el-option label="全部" value="" />
        <el-option label="创作" value="1" />
        <el-option label="解答" value="2" />
        <el-option label="归纳" value="3" />
      </el-select>
    </div>

    <!-- 职位列表 -->
    <div class="jobs-grid">
      <el-card
        v-for="job in jobs"
        :key="job.jobId"
        class="job-card"
        @click.native="showJobDetail(job)"
      >
        <div class="job-card-header">
          <h3 class="job-title">{{ job.title || "职位标题" }}</h3>
          <span class="job-reward">{{ job.money || 0 }}r/题</span>
        </div>

        <div class="job-tags">
          <el-tag
            v-for="(tag, index) in (job.tags || '').split(',')"
            :key="index"
            size="small"
            type="info"
          >
            {{ tag.trim() }}
          </el-tag>
        </div>

        <div class="job-info">
          <div class="info-item">
            <i class="el-icon-user"></i>
            <span
              >已报名: {{ job.joinedPeople || 0 }}/{{
                job.totalPeople || 1
              }}</span
            >
          </div>
          <div class="info-item">
            <i class="el-icon-time"></i>
            <span>{{ job.createTime || "未知时间" }}</span>
          </div>
        </div>

        <div class="job-description">
          <div class="description-preview">
            <div class="ql-container ql-snow ql-readonly">
              <div
                class="ql-editor description-truncate"
                v-html="job.description || '暂无描述'"
              ></div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 职位详情弹窗 -->
    <el-dialog
      title="任务详情"
      :visible.sync="dialogVisible"
      width="80%"
      :fullscreen="false"
      :before-close="handleClose"
      custom-class="admin-job-dialog"
    >
      <div v-if="selectedJob" class="dialog-content">
        <!-- 任务基本信息部分 -->
        <div class="job-info-section">
          <div class="job-header">
            <h2>{{ selectedJob.title }}</h2>
            <el-button
              v-if="isAdmin"
              type="primary"
              size="small"
              @click="
                scoringSettings.criteria && scoringSettings.criteria.length
                  ? viewScoringDetails()
                  : showScoringSettings()
              "
              :type="
                scoringSettings.criteria && scoringSettings.criteria.length
                  ? 'info'
                  : 'primary'
              "
            >
              {{
                scoringSettings.criteria && scoringSettings.criteria.length
                  ? "查看评分标准"
                  : "评分设置"
              }}
            </el-button>
          </div>
          <div class="detail-content">
            <p><strong>任务奖励：</strong> {{ selectedJob.money }}r/题</p>
            <p>
              <strong>报名情况：</strong> {{ selectedJob.joinedPeople }}/{{
                selectedJob.totalPeople
              }}
            </p>
            <p><strong>任务描述：</strong></p>
            <div class="description-content">
              <div class="description-preview">
                <div class="ql-container ql-snow ql-readonly">
                  <div
                    class="ql-editor"
                    v-html="selectedJob.description || '暂无描述'"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 答案列表部分 -->
        <div class="answers-section">
          <!-- 答案列表筛选 -->
          <div class="answers-filter">
            <el-select
              v-model="answerStatus"
              placeholder="状态筛选"
              @change="handleStatusChange"
            >
              <el-option label="全部" value="" />
              <el-option label="待评分" value="PENDING" />
              <el-option label="已评分" value="SCORED" />
            </el-select>
            <el-select
              v-model="sortField"
              placeholder="排序字段"
              @change="handleSortChange"
            >
              <el-option label="提交时间" value="created_at" />
              <el-option label="评分" value="score" />
            </el-select>
            <el-select
              v-model="sortOrder"
              placeholder="排序方式"
              @change="handleSortChange"
            >
              <el-option label="降序" value="desc" />
              <el-option label="升序" value="asc" />
            </el-select>
          </div>

          <!-- 答案列表 -->
          <div class="section-header">
            <h3>提交答案列表</h3>
            <span class="answer-count">共 {{ total }} 条答案</span>
          </div>

          <el-table
            v-loading="answersLoading"
            :data="answers"
            style="width: 100%"
            border
          >
            <el-table-column prop="groupName" label="用户组名称" width="180">
            </el-table-column>
            <el-table-column prop="groupId" label="用户组ID" width="120">
            </el-table-column>
            <el-table-column prop="submitTime" label="提交时间" width="180">
              <template slot-scope="scope">
                {{ formatDate(scope.row.submitTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="content" label="答案内容">
              <template slot-scope="scope">
                <div class="answer-content">
                  <div
                    class="answer-preview ql-editor"
                    v-html="parseRichText(scope.row.content)"
                  ></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="评分" width="200">
              <template slot-scope="scope">
                <div class="score-column">
                  <el-button
                    type="primary"
                    size="small"
                    class="start-scoring-btn"
                    :disabled="scope.row.status === 'SCORED'"
                    @click="viewFullAnswer(scope.row)"
                  >
                    开始打分
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status === 'SCORED' ? 'success' : 'warning'"
                  style="cursor: pointer"
                  @click="
                    scope.row.status === 'SCORED'
                      ? viewAnswerScore(scope.row)
                      : null
                  "
                >
                  {{ scope.row.status === "SCORED" ? "已评分" : "待评分" }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitScores"
          :loading="submitting"
          :disabled="!hasScoreChanges"
        >
          提交评分
        </el-button>
      </div>
    </el-dialog>

    <!-- 评分设置弹窗 -->
    <el-dialog
      title="评分标准设置-管理员设置完成后，才可以进行打分，仅可以设置一次"
      :visible.sync="scoringSettingsVisible"
      width="60%"
      @close="handleScoringSettingsClose"
      :close-on-click-modal="false"
      class="scoring-settings-dialog"
    >
      <div class="scoring-settings-container">
        <div class="scoring-criteria-list">
          <div
            v-for="(criterion, index) in scoringSettings.criteria"
            :key="index"
            class="criterion-item"
          >
            <div class="criterion-header">
              <span class="criterion-index">评分项 {{ index + 1 }}</span>
              <el-button
                type="text"
                @click="removeCriterion(index, criterion)"
                class="remove-btn"
              >
                删除
              </el-button>
            </div>
            <el-form
              :model="criterion"
              label-width="100px"
              class="criterion-form"
            >
              <el-form-item label="名称">
                <el-input
                  v-model="criterion.name"
                  placeholder="请输入评分项名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input
                  type="textarea"
                  v-model="criterion.description"
                  placeholder="请输入评分项描述"
                  :rows="2"
                ></el-input>
              </el-form-item>
              <el-form-item label="评分方式">
                <el-radio-group v-model="criterion.scoreType">
                  <el-radio label="star">星级评分</el-radio>
                  <el-radio label="slider">滑块评分</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="criterion.scoreType === 'star'"
                label="最高分"
              >
                <el-input-number
                  v-model="criterion.maxScore"
                  :min="1"
                  :max="10"
                  :step="1"
                ></el-input-number>
              </el-form-item>
              <template v-else-if="criterion.scoreType === 'slider'">
                <el-form-item label="最低分">
                  <el-input-number
                    v-model="criterion.minScore"
                    :step="1"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="最高分">
                  <el-input-number
                    v-model="criterion.maxScore"
                    :step="1"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-form>
          </div>
        </div>
        <div class="add-criterion-btn">
          <el-button type="primary" @click="addScoringCriteria" plain>
            添加评分项
          </el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleScoringSettingsClose">取消</el-button>
        <el-button type="primary" @click="saveScoringSettings">保存</el-button>
      </span>
    </el-dialog>

    <!-- 添加答案详情弹窗 -->
    <el-dialog
      title="答案详情"
      :visible.sync="answerDetailVisible"
      width="85%"
      append-to-body
      custom-class="answer-detail-dialog"
    >
      <div v-if="selectedAnswer" class="answer-detail">
        <div class="answer-meta">
          <p><strong>用户组名称：</strong>{{ selectedAnswer.groupName }}</p>
          <p><strong>用户组ID：</strong>{{ selectedAnswer.groupId }}</p>
          <p>
            <strong>提交时间：</strong
            >{{ formatDate(selectedAnswer.submitTime) }}
          </p>
        </div>
        <div class="answer-full-content">
          <strong>答案内容：</strong>
          <div class="content-box">
            <div class="ql-container ql-snow">
              <div class="ql-editor" v-html="selectedAnswer.content"></div>
            </div>
          </div>
        </div>

        <!-- 评分表单 -->
        <div
          class="scoring-form-section"
          v-if="scoringSettings.criteria && scoringSettings.criteria.length"
        >
          <h3>评分表单</h3>
          <el-form
            :model="selectedAnswer"
            label-width="120px"
            class="scoring-form"
          >
            <el-form-item
              v-for="criterion in scoringSettings.criteria"
              :key="criterion.id"
              :label="criterion.name"
            >
              <div class="criterion-score">
                <template v-if="criterion.scoreType === 'star'">
                  <el-rate
                    v-model="selectedAnswer.scores[criterion.id]"
                    :max="criterion.maxScore"
                    :texts="
                      Array(criterion.maxScore)
                        .fill('')
                        .map((_, i) => `${i + 1}分`)
                    "
                    :show-text="true"
                    :show-score="true"
                    :allow-half="false"
                    @change="(value) => handleScoreChange(criterion, value)"
                  ></el-rate>
                  <el-button
                    type="text"
                    size="small"
                    class="cancel-score"
                    @click="() => handleCancelScore(criterion)"
                  >
                    取消评分
                  </el-button>
                </template>

                <template v-else>
                  <div class="slider-container">
                    <el-slider
                      v-model="selectedAnswer.scores[criterion.id]"
                      :min="criterion.minScore"
                      :max="criterion.maxScore"
                      :step="1"
                      :show-input="true"
                      @change="(value) => handleScoreChange(criterion, value)"
                    ></el-slider>
                    <el-button
                      type="text"
                      size="small"
                      class="cancel-score"
                      @click="() => handleCancelScore(criterion)"
                    >
                      取消评分
                    </el-button>
                  </div>
                </template>
              </div>
              <div class="criterion-description" v-if="criterion.description">
                {{ criterion.description }}
              </div>
            </el-form-item>

            <!-- 显示平均分 -->
            <el-form-item label="当前平均分">
              <span class="average-score">{{ formatAverageScore }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="answerDetailVisible = false">关闭</el-button>
        <el-button
          type="primary"
          @click="handleSubmitScores"
          :loading="submitting"
        >
          提交评分
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchActivities,
  fetchJobAnswers,
  getScoringCriteria,
  createScoringCriteria,
  updateScoringCriteria,
  deleteScoringCriteria,
  submitScore,
  getSubmissionScores,
} from "@/api/api";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";

export default {
  name: "AdminJobList",
  data() {
    return {
      loading: true,
      answersLoading: false,
      jobs: [],
      answers: [],
      searchQuery: "",
      filterType: "",
      dialogVisible: false,
      answerDetailVisible: false,
      selectedJob: null,
      selectedAnswer: {
        scores: {},
        score: 0,
      },
      submitting: false,
      submittingSingle: false,
      scoreChanges: new Set(),
      originalScores: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      answerStatus: "",
      sortField: "created_at",
      sortOrder: "desc",
      isAdmin: true,
      scoringSettingsVisible: false,
      scoringSettings: {
        criteria: [],
      },
      defaultCriterion: {
        name: "",
        description: "",
        scoreType: "star",
        maxScore: 5,
        minScore: 0,
      },
    };
  },
  computed: {
    hasScoreChanges() {
      return this.scoreChanges.size > 0;
    },
    formatAverageScore() {
      const score = this.selectedAnswer?.score;
      return score !== undefined && score !== null ? score.toFixed(1) : "0.0";
    },
  },
  watch: {
    answerDetailVisible(newVal) {
      if (newVal) {
        document.body.classList.add("dialog-open-no-scroll");
      } else {
        // Delay removal slightly to avoid scrollbar flicker if another dialog opens immediately
        setTimeout(() => {
          // Check if any other dialogs might still require the class
          // This is a basic check; a more robust solution might track multiple dialog states
          if (
            !this.dialogVisible &&
            !this.scoringSettingsVisible /* && !otherDialogVisible */
          ) {
            document.body.classList.remove("dialog-open-no-scroll");
          }
        }, 100); // Adjust delay as needed
      }
    },
    // Add similar watchers for other dialogs if they also need to lock body scroll
    dialogVisible(newVal) {
      if (newVal) {
        document.body.classList.add("dialog-open-no-scroll");
      } else {
        setTimeout(() => {
          if (!this.answerDetailVisible && !this.scoringSettingsVisible) {
            document.body.classList.remove("dialog-open-no-scroll");
          }
        }, 100);
      }
    },
    scoringSettingsVisible(newVal) {
      if (newVal) {
        document.body.classList.add("dialog-open-no-scroll");
      } else {
        setTimeout(() => {
          if (!this.answerDetailVisible && !this.dialogVisible) {
            document.body.classList.remove("dialog-open-no-scroll");
          }
        }, 100);
      }
    },
  },
  methods: {
    fetchActivitiesData() {
      this.loading = true;
      fetchActivities("/jobs")
        .then((response) => {
          // 确保response.records存在且是数组
          const records = response?.records || [];
          this.jobs = records.map((job) => ({
            jobId: job.jobId || 0,
            title: job.title || "未知标题",
            money: job.money || 0,
            tags: job.tags || "",
            joinedPeople: job.joinedPeople || 0,
            totalPeople: job.totalParticipants || 1,
            createTime: job.createdAt
              ? new Date(job.createdAt).toLocaleString()
              : "未知时间",
            description: job.description || "暂无描述",
          }));
          console.log("获取的jobs为:", this.jobs);
        })
        .catch((error) => {
          console.error("获取职位列表失败!", error);
          this.$message.error("获取职位列表失败");
          this.jobs = []; // 清空数据，避免显示旧数据
        })
        .finally(() => {
          this.loading = false; // 确保loading状态被重置
        });
    },
    async showJobDetail(job) {
      this.selectedJob = job;
      this.dialogVisible = true;
      await this.fetchScoringSettings(job.jobId);
      await this.fetchAnswers(job.jobId);
    },
    async fetchAnswers(jobId) {
      this.answersLoading = true;
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          status: this.answerStatus,
          sort: this.sortField,
          order: this.sortOrder,
        };
        console.log("传入的参数:", {
          jobId,
          ...params,
        });
        const response = await fetchJobAnswers(jobId, params);

        this.answers = response.data.records;
        this.total = response.data.total;
      } catch (error) {
        console.error("获取答案列表失败:", error);
        this.$message({
          message: "获取答案列表失败",
          type: "error",
          duration: 2000,
        });
      } finally {
        this.answersLoading = false;
      }
    },
    parseRichText(content) {
      try {
        // 检查内容是否为字符串类型的JSON
        if (typeof content === "string" && content.startsWith("{")) {
          const parsedContent = JSON.parse(content);

          // 处理Delta格式的富文本内容
          if (parsedContent.ops) {
            return this.convertDeltaToHtml(parsedContent.ops);
          }

          // 如果是其他JSON格式，尝试提取文本内容
          return this.extractTextFromJson(parsedContent);
        }

        // 如果不是JSON格式，直接返回原内容
        return content;
      } catch (error) {
        console.error("解析富文本内容失败:", error);
        return content; // 解析失败时返回原始内容
      }
    },
    convertDeltaToHtml(ops) {
      let html = "";
      ops.forEach((op) => {
        let text = op.insert;

        // 处理文本样式
        if (op.attributes) {
          if (op.attributes.bold) text = `<strong>${text}</strong>`;
          if (op.attributes.italic) text = `<em>${text}</em>`;
          if (op.attributes.underline) text = `<u>${text}</u>`;
          if (op.attributes.color)
            text = `<span style="color: ${op.attributes.color}">${text}</span>`;
        }

        // 处理换行
        if (text === "\n") {
          html += "<br>";
        } else {
          html += text;
        }
      });
      return html;
    },
    extractTextFromJson(json) {
      let text = "";
      const traverse = (obj) => {
        if (!obj) return;
        if (typeof obj === "string") {
          text += obj + " ";
        } else if (Array.isArray(obj)) {
          obj.forEach((item) => traverse(item));
        } else if (typeof obj === "object") {
          Object.values(obj).forEach((value) => traverse(value));
        }
      };
      traverse(json);
      return text.trim();
    },
    async viewFullAnswer(answer) {
      try {
        // 确保已经获取了评分标准
        if (
          !this.scoringSettings.criteria ||
          this.scoringSettings.criteria.length === 0
        ) {
          await this.fetchScoringSettings(this.selectedJob.jobId);
        }

        // 初始化selectedAnswer，确保包含scores对象
        this.selectedAnswer = {
          ...answer,
          content: this.parseRichText(answer.content),
          scores: answer.scores || {},
          score: answer.score || 0,
        };

        // 为每个评分标准初始化分数（如果没有分数）
        this.scoringSettings.criteria.forEach((criterion) => {
          if (!(criterion.id in this.selectedAnswer.scores)) {
            this.$set(this.selectedAnswer.scores, criterion.id, 0);
          }
        });

        console.log("答案详情数据:", this.selectedAnswer);
        console.log("评分标准:", this.scoringSettings.criteria);

        this.answerDetailVisible = true;
      } catch (error) {
        console.error("加载答案详情失败:", error);
        this.$message.error("加载答案详情失败");
      }
    },
    formatDate(timestamp) {
      if (!timestamp) return "未知时间";
      const date = new Date(timestamp);
      return date.toLocaleString();
    },
    handleClose(done) {
      this.selectedJob = null;
      this.answers = [];
      done();
    },
    handleScoreChange(criterion, value) {
      console.log("评分变化:", criterion.id, value);

      // 使用Vue的响应式更新方法保存分数
      this.$set(this.selectedAnswer.scores, criterion.id, value);

      // 更新平均分
      this.updateAverageScore();

      console.log("当前所有评分:", this.selectedAnswer.scores);
      console.log("当前平均分:", this.selectedAnswer.score);
    },
    async handleSubmitScores() {
      if (!this.selectedAnswer || !this.selectedJob) return;

      this.submitting = true;
      try {
        // 检查jobId是否存在且有效，确保是整数
        const jobId = parseInt(this.selectedJob.jobId);
        if (!jobId || isNaN(jobId)) {
          throw new Error("无效的任务ID");
        }

        // 检查submissionId是否存在且有效，确保是整数
        const submissionId = parseInt(this.selectedAnswer.submissionId);
        if (!submissionId || isNaN(submissionId)) {
          throw new Error("无效的提交ID");
        }

        // 收集所有评分项的分数
        const scores = [];

        // 遍历所有评分标准，收集分数
        for (const criterion of this.scoringSettings.criteria) {
          const score = this.selectedAnswer.scores[criterion.id];
          // 如果该评分项有分数才添加
          if (score !== undefined && score !== null) {
            scores.push({
              criteriaId: parseInt(criterion.id), // 确保criteriaId是整数
              score: parseInt(score), // 确保score是整数
              comment: criterion.comment || "", // 评语保持字符串类型
            });
          }
        }

        // 如果没有任何有效的评分，提示错误
        if (scores.length === 0) {
          throw new Error("请至少完成一项评分");
        }

        console.log("提交的评分数据:", { jobId, submissionId, scores });

        // 使用API函数提交评分
        const response = await submitScore({ jobId, submissionId, scores });

        if (response.code !== 200) {
          throw new Error(response.message || "评分提交失败");
        }

        // 更新本地状态
        this.selectedAnswer.status = "SCORED";

        // 更新列表中对应的项
        const index = this.answers.findIndex(
          (item) => parseInt(item.submissionId) === submissionId
        );
        if (index !== -1) {
          this.$set(this.answers, index, {
            ...this.answers[index],
            status: "SCORED",
          });
        }

        this.$message.success("评分提交成功");
        this.answerDetailVisible = false;

        // 刷新列表
        await this.fetchAnswers(jobId);
      } catch (error) {
        console.error("提交评分失败:", error);
        this.$message.error(error.message || "评分提交失败");
      } finally {
        this.submitting = false;
      }
    },
    async handleSubmitSingleScore() {
      if (!this.selectedAnswer) return;

      this.submittingSingle = true;
      try {
        await this.submitScores([
          {
            answerId: this.selectedAnswer.id,
            score: this.selectedAnswer.score,
          },
        ]);

        this.$message.success("评分提交成功");
        this.scoreChanges.delete(this.selectedAnswer.id);
        this.answerDetailVisible = false;
      } catch (error) {
        this.$message.error("评分提交失败");
        console.error("Error submitting score:", error);
      } finally {
        this.submittingSingle = false;
      }
    },
    async submitScores(scores) {
      console.log("Submitting scores:", scores);
    },
    handleStatusChange() {
      this.currentPage = 1;
      this.fetchAnswers(this.selectedJob.jobId);
    },
    handleSortChange() {
      this.currentPage = 1;
      this.fetchAnswers(this.selectedJob.jobId);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchAnswers(this.selectedJob.jobId);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchAnswers(this.selectedJob.jobId);
    },
    async fetchScoringSettings(jobId) {
      try {
        console.log("Fetching scoring settings for job:", jobId);
        const response = await getScoringCriteria(jobId);
        console.log("Scoring criteria response:", response);

        if (
          response &&
          response.code === 200 &&
          response.data &&
          response.data.criteria
        ) {
          this.scoringSettings.criteria = response.data.criteria.map(
            (criterion) => ({
              id: criterion.id,
              jobId: criterion.jobId,
              name: criterion.name || "",
              description: criterion.description || "",
              scoreType: criterion.scoreType || "star",
              maxScore: criterion.maxScore || 5,
              minScore: criterion.minScore || 0,
            })
          );
          console.log(
            "Processed scoring criteria:",
            this.scoringSettings.criteria
          );
        } else {
          console.warn("Invalid scoring criteria data:", response);
          this.scoringSettings.criteria = [];
        }
      } catch (error) {
        console.error("Error fetching scoring settings:", error);
        this.$message.error("获取评分设置失败");
        this.scoringSettings.criteria = [];
      }
    },
    handleScoringSettingsClose() {
      this.scoringSettingsVisible = false;
    },
    addScoringCriteria() {
      this.scoringSettings.criteria.push({
        name: "",
        description: "",
        scoreType: "star",
        maxScore: 5,
        minScore: 0,
      });
    },
    async removeCriterion(index, criterion) {
      try {
        if (!criterion) return;

        if (criterion.id) {
          console.log("Deleting criterion:", criterion);
          await deleteScoringCriteria(this.selectedJob.jobId, criterion.id);
          console.log("Criterion deleted successfully");
        }

        this.scoringSettings.criteria.splice(index, 1);
        this.$message.success("评分项删除成功");
      } catch (error) {
        console.error("Error removing criterion:", error);
        this.$message.error("删除评分项失败");
      }
    },
    async showScoringSettings() {
      try {
        // 重新获取评分标准数据
        await this.fetchScoringSettings(this.selectedJob.jobId);
        this.scoringSettingsVisible = true;
      } catch (error) {
        console.error("获取评分设置失败:", error);
        this.$message.error("获取评分设置失败");
      }
    },
    async saveScoringSettings() {
      try {
        // 1. 检查任务ID
        const jobId = Number(this.selectedJob?.jobId);
        if (!jobId || isNaN(jobId)) {
          console.error("Invalid jobId:", this.selectedJob?.jobId);
          this.$message.error("无效的任务ID");
          return;
        }

        // 2. 检查评分项数据
        if (!Array.isArray(this.scoringSettings?.criteria)) {
          console.error("Invalid criteria:", this.scoringSettings?.criteria);
          this.$message.error("无效的评分项数据");
          return;
        }

        // 3. 遍历处理每个评分项
        for (const criterion of this.scoringSettings.criteria) {
          // 准备评分项数据，确保类型正确
          const criterionData = {
            name: String(criterion.name || ""), // 字符串
            description: String(criterion.description || ""), // 字符串
            scoreType: criterion.scoreType || "star", // 字符串
            maxScore: Number(criterion.maxScore || 5), // 数字类型
            minScore: Number(criterion.minScore || 0), // 数字类型
          };

          console.log("Saving criterion:", {
            hasId: !!criterion.id,
            criterionId: criterion.id,
            data: criterionData,
          });

          if (criterion.id) {
            // 更新已存在的评分项
            const criterionId = Number(criterion.id);
            if (!criterionId || isNaN(criterionId)) {
              console.error("Invalid criterion id:", criterion.id);
              continue;
            }
            await updateScoringCriteria(jobId, criterionId, criterionData);
          } else {
            // 创建新的评分项
            await createScoringCriteria({
              jobId: jobId,
              criteria: [criterionData],
            });
          }
        }

        this.$message.success("评分设置保存成功");
        await this.fetchScoringSettings(jobId);
      } catch (error) {
        console.error("保存评分设置失败:", error);
        this.$message.error("保存评分设置失败");
      }
    },
    handleCancelScore(criterion) {
      // 使用Vue的响应式方法删除分数
      this.$delete(this.selectedAnswer.scores, criterion.id);

      // 重新计算平均分
      this.updateAverageScore();
    },
    updateAverageScore() {
      let totalScore = 0;
      let validCriteriaCount = 0;

      this.scoringSettings.criteria.forEach((criterion) => {
        const score = this.selectedAnswer.scores[criterion.id];
        if (score !== undefined && score !== null) {
          totalScore += Number(score);
          validCriteriaCount++;
        }
      });

      // 更新平均分（保留一位小数）
      if (validCriteriaCount > 0) {
        const averageScore =
          Math.round((totalScore / validCriteriaCount) * 10) / 10;
        this.$set(this.selectedAnswer, "score", averageScore);
      } else {
        this.$set(this.selectedAnswer, "score", 0);
      }
    },
    viewScoringDetails() {
      // 构建格式化的评分标准详情内容
      const formattedContent = this.scoringSettings.criteria
        .map((item, index) => {
          return `<div class="scoring-detail-item">
          <div class="detail-header">评分项 ${index + 1}：${item.name}</div>
          <div class="detail-content">
            <div class="detail-row"><strong>说明：</strong>${
              item.description || "无"
            }</div>
            <div class="detail-row"><strong>评分方式：</strong>${
              item.scoreType === "star" ? "星级评分" : "滑块评分"
            }</div>
            <div class="detail-row"><strong>分值范围：</strong>${
              item.minScore || 0
            } - ${item.maxScore}</div>
          </div>
        </div>`;
        })
        .join("");

      const content = `
        <div class="scoring-details-container">
          ${formattedContent || '<div class="no-criteria">暂无评分标准</div>'}
        </div>
      `;

      // 添加自定义样式
      const style = `
        <style>
          /* 弹窗容器样式 */
          .scoring-details-dialog {
            display: flex;
            flex-direction: column;
            max-height: 90vh !important;
            margin: 5vh auto !important;
            width: 60% !important;
            min-width: 600px !important;
          }
          
          /* 弹窗头部样式 */
          .scoring-details-dialog .el-message-box__header {
            padding: 15px 20px;
            border-bottom: 1px solid #e4e7ed;
          }
          
          /* 弹窗内容区域样式 */
          .scoring-details-dialog .el-message-box__content {
            padding: 20px !important;
            max-height: calc(80vh - 108px) !important;
            overflow-y: auto !important;
            overflow-x: hidden;
          }
          
          /* 自定义滚动条样式 */
          .scoring-details-dialog .el-message-box__content::-webkit-scrollbar {
            width: 6px;
          }
          
          .scoring-details-dialog .el-message-box__content::-webkit-scrollbar-thumb {
            background-color: #909399;
            border-radius: 3px;
          }
          
          .scoring-details-dialog .el-message-box__content::-webkit-scrollbar-track {
            background-color: #f5f7fa;
          }

          /* 内容容器样式 */
          .scoring-details-container {
            padding: 0;
          }

          /* 评分项卡片样式 */
          .scoring-detail-item {
            background-color: #f5f7fa;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid #e4e7ed;
          }

          .scoring-detail-item:last-child {
            margin-bottom: 0;
          }

          /* 评分项标题样式 */
          .detail-header {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid #dcdfe6;
          }

          /* 评分项内容样式 */
          .detail-content {
            color: #606266;
          }

          .detail-row {
            margin: 8px 0;
            line-height: 1.6;
            display: flex;
            flex-wrap: wrap;
          }

          .detail-row strong {
            color: #303133;
            margin-right: 8px;
            min-width: 80px;
          }

          /* 无评分项时的提示样式 */
          .no-criteria {
            text-align: center;
            color: #909399;
            padding: 20px;
          }

          /* 弹窗底部样式 */
          .scoring-details-dialog .el-message-box__btns {
            padding: 10px 20px;
            border-top: 1px solid #e4e7ed;
          }
</style>
      `;

      try {
        this.$alert(style + content, "评分标准详情", {
          dangerouslyUseHTMLString: true,
          customClass: "scoring-details-dialog",
          showClose: true,
          closeOnClickModal: true,
          closeOnPressEscape: true,
          confirmButtonText: "关闭",
          callback: (action) => {
            // 不需要做任何处理，只是为了避免取消时的错误
            return;
          },
        }).catch((err) => {
          // 忽略弹窗关闭时的错误
          console.log("Dialog closed");
        });
      } catch (error) {
        console.log("Dialog operation completed");
      }
    },
    async viewAnswerScore(answer) {
      try {
        // 获取该答案的评分详情
        const submissionId = answer.submissionId;
        const response = await getSubmissionScores(submissionId);

        if (response && response.data) {
          // 确保scores是数组
          const scores = Array.isArray(response.data)
            ? response.data
            : Array.isArray(response.data.scores)
            ? response.data.scores
            : [];

          console.log("评分详情数据:", scores); // 调试日志

          // 构建评分详情显示内容
          let detailContent = `<div class="score-detail">
            <div class="answer-content" style="margin-bottom: 20px;">
              <h4>答案内容：</h4>
              <div class="content-box">${this.parseRichText(
                answer.content
              )}</div>
            </div>
            <div class="scores-list">
              <h4>评分详情：</h4>
              <ul style="list-style: none; padding: 0;">`;

          // 添加每个评分项的详情
          if (
            this.scoringSettings.criteria &&
            this.scoringSettings.criteria.length > 0
          ) {
            this.scoringSettings.criteria.forEach((criterion) => {
              const score = scores.find(
                (s) => s && s.criteriaId === criterion.id
              );
              if (score) {
                detailContent += `
                  <li style="margin-bottom: 10px;">
                    <div><strong>${criterion.name}</strong></div>
                    <div>得分：${score.score} / ${criterion.maxScore}</div>
                    ${score.comment ? `<div>评语：${score.comment}</div>` : ""}
                  </li>`;
              } else {
                // 如果没有找到对应的评分，显示未评分
                detailContent += `
                  <li style="margin-bottom: 10px;">
                    <div><strong>${criterion.name}</strong></div>
                    <div>未评分</div>
                  </li>`;
              }
            });
          } else {
            detailContent += `<li>暂无评分项详情</li>`;
          }

          // 添加总分
          detailContent += `
              </ul>
              <div style="margin-top: 15px; font-size: 16px;">
                <strong>最终得分：</strong> ${answer.score || "0"}
              </div>
            </div>
          </div>`;

          // 使用 Element UI 的 MessageBox 显示详情
          try {
            await this.$alert(detailContent, "评分详情", {
              dangerouslyUseHTMLString: true,
              customClass: "score-detail-dialog",
              showClose: true,
              closeOnClickModal: true,
              closeOnPressEscape: true,
              confirmButtonText: "关闭",
              callback: (action) => {
                // 不需要做任何处理，只是为了避免取消时的错误
                return;
              },
            });
          } catch (dialogError) {
            // 忽略弹窗关闭时的错误
            console.log("Dialog closed");
          }
        } else {
          this.$message.warning("未找到评分详情");
        }
      } catch (error) {
        console.error("获取评分详情失败:", error);
        this.$message.error(
          "获取评分详情失败：" + (error.message || "未知错误")
        );
      }
    },
  },
  created() {
    this.fetchActivitiesData();
  },
};
</script>

<style lang="scss" scoped>
.score-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  .start-scoring-btn {
    margin-top: 4px;
  }
}
.job-list-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: "Cera-Bold", sans-serif;
}

.filter-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.filter-select {
  width: 200px;
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.job-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.job-card:hover {
  transform: translateY(-5px);
}

.job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.job-title {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.job-reward {
  color: #e6a23c;
  font-weight: bold;
}

.job-tags {
  margin: 10px 0;
}

.job-tags .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.job-info {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #909399;
  font-size: 14px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.job-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
  margin-top: 10px;
}

.description-truncate {
  max-height: 100px !important;
  overflow: hidden !important;
  position: relative !important;
}

.description-truncate::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  pointer-events: none;
}

.detail-content {
  padding: 20px 0;
}

.description-content {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-top: 10px;
}

.el-loading-spinner {
  .el-loading-text {
    color: #409eff;
    font-size: 16px;
    margin-top: 10px;
  }
  .circular {
    width: 42px;
    height: 42px;
  }
}

.admin-job-dialog {
  min-height: 70vh;
}

.dialog-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.job-info-section {
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.answers-section {
  flex: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.answer-count {
  color: #909399;
  font-size: 14px;
}

.answer-content {
  position: relative;
  cursor: pointer;
  padding-right: 80px;
}

.answer-preview {
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.answer-preview :deep(p) {
  margin: 0;
}

.answer-preview :deep(strong) {
  font-weight: 600;
}

.answer-preview :deep(em) {
  font-style: italic;
}

.answer-preview :deep(u) {
  text-decoration: underline;
}

.answer-preview :deep(span[style*="color"]) {
  display: inline;
}

.answer-preview :deep(br) {
  display: none;
}

.view-more {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  font-size: 12px;
  color: #409eff;
}

.view-more i {
  font-size: 12px;
  margin-left: 2px;
}

.answer-detail {
  padding: 20px;
}

.answer-meta {
  margin-bottom: 20px;
}

.content-box {
  margin-top: 10px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  white-space: pre-wrap;
}

.el-table {
  margin-top: 16px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

.dialog-footer {
  margin-top: 20px;
  text-align: right;
}

.score-section {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

:deep(.el-rate) {
  display: inline-flex;
  align-items: center;
}

:deep(.el-rate__text) {
  margin-left: 10px;
}

/* Quill 编辑器内容样式 */
.description-preview {
  max-height: 200px;
  overflow-y: auto;
  border: none;
}

.description-preview :deep(.ql-container) {
  border: none;
}

.description-preview :deep(.ql-editor) {
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}

/* 标题样式 */
.description-preview :deep(.ql-editor h1),
.description-preview :deep(.ql-editor h2),
.description-preview :deep(.ql-editor h3) {
  font-weight: 600;
  line-height: 1.4;
  margin: 0.5em 0;
}

.description-preview :deep(.ql-editor h1) {
  font-size: 1.5em;
}
.description-preview :deep(.ql-editor h2) {
  font-size: 1.3em;
}
.description-preview :deep(.ql-editor h3) {
  font-size: 1.1em;
}

/* 列表样式 */
.description-preview :deep(.ql-editor ul),
.description-preview :deep(.ql-editor ol) {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.description-preview :deep(.ql-editor li) {
  margin-bottom: 0.3em;
}

/* 图片样式 */
.description-preview :deep(.ql-editor img) {
  max-width: 100%;
  margin: 0.5em 0;
  border-radius: 4px;
}

/* 引用样式 */
.description-preview :deep(.ql-editor blockquote) {
  border-left: 3px solid #e6e8eb;
  margin: 0.5em 0;
  padding-left: 1em;
  color: #909399;
}

/* 代码样式 */
.description-preview :deep(.ql-editor pre) {
  background-color: #f5f7fa;
  padding: 0.8em;
  border-radius: 4px;
  margin: 0.5em 0;
}

.description-preview :deep(.ql-editor code) {
  background-color: #f5f7fa;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: "Cera-Bold", sans-serif;
}

/* 链接样式 */
.description-preview :deep(.ql-editor a) {
  color: #409eff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.description-preview :deep(.ql-editor a:hover) {
  color: #66b1ff;
  text-decoration: underline;
}

/* 表格样式 */
.description-preview :deep(.ql-editor table) {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5em 0;
}

.description-preview :deep(.ql-editor td),
.description-preview :deep(.ql-editor th) {
  border: 1px solid #dcdfe6;
  padding: 0.4em;
}

.description-preview :deep(.ql-editor th) {
  background-color: #f5f7fa;
  font-weight: bold;
}

.answers-filter {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 答案详情弹窗样式 */
.answer-detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
}

.answer-detail {
  padding: 20px;
  max-height: calc(80vh - 120px);
  overflow-y: auto;
}

.answer-meta {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.answer-meta p {
  margin: 8px 0;
  color: #606266;
}

.answer-full-content {
  margin: 20px 0;
}

.content-box {
  margin-top: 10px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.content-box :deep(.ql-container) {
  border: none;
  background: transparent;
}

.content-box :deep(.ql-editor) {
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #303133;
}

/* 富文本内容样式 */
.content-box :deep(.ql-editor) {
  /* 段落样式 */
  p {
    margin: 0.5em 0;
  }

  /* 标题样式 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    line-height: 1.4;
    margin: 1em 0 0.5em;
  }

  /* 列表样式 */
  ul,
  ol {
    padding-left: 2em;
    margin: 0.5em 0;
  }

  li {
    margin: 0.3em 0;
  }

  /* 代码块样式 */
  pre {
    background-color: #f8f9fa;
    padding: 1em;
    border-radius: 4px;
    margin: 0.5em 0;
    overflow-x: auto;
  }

  code {
    background-color: #f8f9fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: monospace;
  }

  /* 引用样式 */
  blockquote {
    border-left: 4px solid #dcdfe6;
    margin: 0.5em 0;
    padding: 0.5em 1em;
    color: #606266;
    background-color: #f8f9fa;
  }

  /* 图片样式 */
  img {
    max-width: 100%;
    height: auto;
    margin: 0.5em 0;
    border-radius: 4px;
  }

  /* 表格样式 */
  table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
  }

  td,
  th {
    border: 1px solid #dcdfe6;
    padding: 0.5em;
  }

  th {
    background-color: #f8f9fa;
    font-weight: 600;
  }

  /* 链接样式 */
  a {
    color: #409eff;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

.score-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scoring-settings-container {
  padding: 20px;
}

.scoring-criteria-list {
  margin-bottom: 20px;
}

.criterion-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.criterion-item:last-child {
  margin-bottom: 0;
}

.criterion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.criterion-index {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.remove-btn {
  color: #f56c6c;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.criterion-form {
  margin-top: 10px;
}

.add-criterion-btn {
  margin-top: 20px;
  text-align: right;
}

.scoring-actions {
  margin-top: 20px;
  text-align: right;
}

.scoring-form-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.criterion-score {
  margin-bottom: 10px;
}

.criterion-description {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.average-score {
  font-size: 18px;
  color: #409eff;
  font-weight: bold;
}

.slider-score {
  padding: 0 10px;
  margin-top: 10px;
}

:deep(.el-slider__input) {
  width: 80px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.job-header h2 {
  margin: 0;
}

.scoring-form-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.criterion-score {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cancel-score {
  color: #f56c6c;
}

.cancel-score:hover {
  color: #f78989;
}

:deep(.el-slider) {
  flex: 1;
}

:deep(.el-slider__input) {
  width: 80px;
}

:deep(.scoring-details-dialog) {
  .el-message-box__content {
    padding: 20px;
    white-space: pre-line;
    line-height: 1.6;
    font-size: 14px;
    max-height: 400px;
    overflow-y: auto;
  }

  .el-message-box__title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }
}

:deep(.answer-detail-dialog) {
  /* Prevent scroll on the wrapper */
  .el-dialog__wrapper {
    overflow: hidden;
  }

  /* Apply scroll directly to the dialog body and prevent scroll chaining */
  .el-dialog__body {
    max-height: calc(
      80vh - 110px
    ); /* Adjust based on actual header/footer height */
    overflow-y: auto; /* Enable scroll on body */
    overscroll-behavior: contain; /* Prevent background scroll */
    padding: 10px 20px; /* Restore padding */

    /* Custom scrollbar styles */
    &::-webkit-scrollbar {
      width: 8px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #c0c4cc;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-track {
      background-color: #f5f7fa;
    }
  }

  /* Ensure inner container does not interfere */
  .answer-detail {
    /* Remove height/overflow constraints from inner div */
    max-height: none;
    overflow: visible;
    padding: 0; /* Remove padding if it was added here */

    /* Keep existing inner styles */
    .answer-full-content {
      margin-bottom: 20px;
      .content-box {
        padding: 15px;
        background-color: #f8f9fa;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-top: 10px;
      }
    }

    .scoring-form-section {
      margin-top: 20px;
      padding: 20px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }
  }
}

/* Keep scoring details dialog styles if they are still needed elsewhere */
:deep(.scoring-details-dialog) {
  .el-message-box__content {
    padding: 20px;
    white-space: pre-line;
    line-height: 1.6;
    font-size: 14px;
    max-height: 400px;
    overflow-y: auto;
  }

  .el-message-box__title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .el-message-box__title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid #e4e7ed;
  }

  .el-message-box__btns {
    padding: 10px 20px;
    border-top: 1px solid #e4e7ed;
  }

  .score-detail {
    .answer-content {
      margin-bottom: 20px;

      h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 16px;
      }

      .content-box {
        background-color: #f5f7fa;
        padding: 15px;
        border-radius: 4px;
        border: 1px solid #e4e7ed;
        line-height: 1.6;

        // 美化内部滚动条
        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #909399;
          border-radius: 3px;
        }

        &::-webkit-scrollbar-track {
          background-color: #ffffff;
        }
      }
    }

    .scores-list {
      h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 16px;
      }

      ul {
        margin: 0;
        padding: 0;
      }

      li {
        padding: 12px;
        background-color: #f5f7fa;
        border-radius: 4px;
        margin-bottom: 8px;
        border: 1px solid #e4e7ed;

        strong {
          color: #303133;
        }

        div {
          margin: 5px 0;
          color: #606266;
        }
      }
    }
  }
}

:deep(.score-detail-dialog) {
  .el-message-box__content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #909399;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background-color: #f5f7fa;
    }
  }
  
  /* 确保弹窗本身不会超出屏幕 */
  .el-message-box {
    max-height: 80vh;
    margin-top: 10vh;
  }

  /* 优化内容布局 */
  .score-detail {
    .answer-content {
      margin-bottom: 20px;
      
      h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 16px;
      }
      
      .content-box {
        background-color: #f5f7fa;
        padding: 15px;
        border-radius: 4px;
        border: 1px solid #e4e7ed;
        line-height: 1.6;
      }
    }
    
    .scores-list {
      h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 16px;
      }
      
      ul {
        margin: 0;
        padding: 0;
      }
      
      li {
        padding: 12px;
        background-color: #f5f7fa;
        border-radius: 4px;
        margin-bottom: 8px;
        border: 1px solid #e4e7ed;
        
        strong {
          color: #303133;
        }
        
        div {
          margin: 5px 0;
          color: #606266;
        }
      }
    }
  }
}

.el-tag {
  &:hover {
    opacity: 0.8;
  }
}
\n/* Global style to prevent body scroll when dialog is open */
.dialog-open-no-scroll {
  overflow: hidden !important;
}
</style>
